forum

Home / DeveloperSection / Forums / Update Image source in data template long list selector WP8

Ask Question

Update Image source in data template long list selector WP8

Samuel Fernandes295728-Mar-2015

My problem is : In my long list selector, when my list items loaded and i click on edit button to activate/inactive items

When i active / d-activate the top items then on scrolling down long list selector the some- where middle items where automatically got selected.

Update Image source in data template long list selector WP8

Update Image source in data template long list selector WP8

Please suggest something to me to get rid of this issue:

MainPage.xaml

<phone:PhoneApplicationPage x:Class="longlistselector.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"FontFamily="{StaticResource PhoneFontFamilyNormal}"FontSize="{StaticResource PhoneFontSizeNormal}"Foreground="{StaticResource PhoneForegroundBrush}"SupportedOrientations="Portrait"Orientation="Portrait" shell:SystemTray.IsVisible="True"><phone:PhoneApplicationPage.Resources><phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/><phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/><DataTemplate x:Key="CustomHeaderTemplate"><StackPanelBackground="DarkKhaki"Orientation="Horizontal"Width="450"><TextBlockText="{Binding Name}"FontSize="36"FontFamily="{StaticResource PhoneFontFamilySemiLight}"/></StackPanel></DataTemplate><DataTemplate x:Key="CustomExpanderTemplate"><StackPanelOrientation="Horizontal"><ImageSource="{Binding Image}"Stretch="None"/></StackPanel></DataTemplate><DataTemplate x:Key="CustomItemTemplate"><StackPanelBackground="BlueViolet"Margin="0,0,0,10"Height="55"Orientation="Horizontal"Width="412"><BorderBorderThickness="1"CornerRadius="10"Background="White"Width="280"Height="50"><TextBlockText="{Binding UnitName}"Foreground="Black"FontWeight="Bold"/></Border><StackPanelMargin="0,6,15,0"><ImageHeight="32"Width="32"Source="/Assets/Images/edit.png"></Image></StackPanel><StackPanelMargin="0,6,15,0"><ImageHeight="32"Width="32"Source="/Assets/Images/trash.png"></Image></StackPanel><StackPanelMargin="0,6,15,0"><ImageHeight="32"Width="32"Source="{Binding ImageSource}"></Image></StackPanel></StackPanel></DataTemplate><DataTemplate x:Key="CustomNonExpandableHeaderTemplate"><StackPanelOrientation="Vertical"><TextBlockText="{Binding Name}"FontSize="{StaticResource PhoneFontSizeExtraLarge}"FontFamily="{StaticResource PhoneFontFamilySemiLight}"/></StackPanel></DataTemplate></phone:PhoneApplicationPage.Resources><!--LayoutRootis the root grid where all page content is placed--><Grid x:Name="LayoutRoot"Background="Transparent"><Grid.RowDefinitions><RowDefinitionHeight="Auto"/><RowDefinitionHeight="*"/></Grid.RowDefinitions><!--TitlePanel contains the name of the application and page title--><StackPanel x:Name="TitlePanel"Grid.Row="0"Margin="12,17,0,28"><TextBlockText="MY APPLICATION"Style="{StaticResource PhoneTextNormalStyle}"Margin="12,0"/><TextBlockText="page name"Margin="9,-7,0,0"Style="{StaticResource PhoneTextTitle1Style}"/></StackPanel><!--ContentPanel- place additional content here--><Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"><phone:LongListSelector x:Name="GroupListBox"Width="Auto"Background="#D1EEFC"BorderThickness="1"IsGroupingEnabled="False"LayoutMode="List"HideEmptyGroups="True"VerticalAlignment="Stretch"><phone:LongListSelector.ItemTemplate><DataTemplate><StackPanelBackground="White"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Width="Auto"Height="Auto"><Grid x:Name="SubGrid"Width="Auto"HorizontalAlignment="Stretch"><Grid.ColumnDefinitions><ColumnDefinition x:Name="SubGridCol"/><ColumnDefinitionWidth="80"/></Grid.ColumnDefinitions><StackPanelGrid.Column="0"Name="Subpnl"Orientation="Horizontal"HorizontalAlignment="Stretch"Width="Auto"MaxHeight="200"MinHeight="100"><TextBlockTextWrapping="Wrap"HorizontalAlignment="Left"Height="Auto"Width="250"TextAlignment="Left"Foreground="Black"FontSize="25"VerticalAlignment="Center"Text="{Binding Name}"Style="{StaticResource PhoneTextNormalStyle}"FontFamily="{StaticResource PhoneFontFamilySemiBold}"/></StackPanel><StackPanelGrid.Column="1"HorizontalAlignment="Stretch"VerticalAlignment="Center"Background="Transparent"><ImageSource="{Binding Content}"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Width="Auto"Visibility="{Binding ControlVisibility}"Tap="ActiveInactiveImage_Tap_1"></Image></StackPanel></Grid><RectangleFill="Gray"Height="1"HorizontalAlignment="Stretch"Width="1000"/></StackPanel></DataTemplate></phone:LongListSelector.ItemTemplate></phone:LongListSelector></Grid></Grid><phone:PhoneApplicationPage.ApplicationBar><shell:ApplicationBarMode="Default"Opacity="1.0"IsMenuEnabled="True"IsVisible="True"><shell:ApplicationBarIconButtonClick="ApplicationBarIconButton_Click_1"IconUri="/Assets/AppBar/edit.png"Text="Edit"/></shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar></phone:PhoneApplicationPage>

MainPage.xaml.cs

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Navigation; using Microsoft.Phone.Controls; using Microsoft.Phone.Shell; using longlistselector.Resources; using System.Windows.Media.Imaging; using System.Collections.ObjectModel; namespace longlistselector {publicpartialclassMainPage:PhoneApplicationPage{// ConstructorList<GroupClass>List=newList<GroupClass>();ObservableCollection<GroupClass>DataList=null;static bool IsEditable=false;publicMainPage(){InitializeComponent();// Sample code to localize the ApplicationBar//BuildLocalizedApplicationBar();List.Add(newGroupClass(){Name="Temp",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=1});List.Add(newGroupClass(){Name="Temp1",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=2});List.Add(newGroupClass(){Name="Temp2",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=3});List.Add(newGroupClass(){Name="Temp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=4});List.Add(newGroupClass(){Name="Aemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=5});List.Add(newGroupClass(){Name="Aemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=6});List.Add(newGroupClass(){Name="Aemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=7});List.Add(newGroupClass(){Name="Bemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=8});List.Add(newGroupClass(){Name="Bemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=9});List.Add(newGroupClass(){Name="Bemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=10});List.Add(newGroupClass(){Name="Cemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=11});List.Add(newGroupClass(){Name="Cemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=12});List.Add(newGroupClass(){Name="Cemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=13});List.Add(newGroupClass(){Name="Demp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=14});List.Add(newGroupClass(){Name="Demp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=15});List.Add(newGroupClass(){Name="Demp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=16});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=17});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=18});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=19});List.Add(newGroupClass(){Name="Eemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=20});List.Add(newGroupClass(){Name="Femp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=21});List.Add(newGroupClass(){Name="Femp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=22});List.Add(newGroupClass(){Name="Gemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=23});List.Add(newGroupClass(){Name="Gemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=24});List.Add(newGroupClass(){Name="Hemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=25});List.Add(newGroupClass(){Name="Hemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=26});List.Add(newGroupClass(){Name="Jemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=27});List.Add(newGroupClass(){Name="Jemp3",IsActive=false,IsCustom=false,IsEditable=false,UnitGroupID=28});DataList=newObservableCollection<GroupClass>(List);this.GroupListBox.ItemsSource=DataList;}privatevoidActiveInactiveImage_Tap_1(object sender,System.Windows.Input.GestureEventArgs e){Image imgobj = sender asImage;GroupClass gcobj =(GroupClass)imgobj.DataContext;if(gcobj !=null){ gcobj.IsActive=!gcobj.IsActive; imgobj.DataContext= gcobj;DataList.FirstOrDefault(x => x.UnitGroupID== gcobj.UnitGroupID).IsActive= gcobj.IsActive; imgobj.Source=newBitmapImage(newUri(gcobj.IsActive?"/Assets/Images/Active.png":"/Assets/Images/Inactive.png",UriKind.Relative));}GroupListBox.ItemsSource=DataList;}privatevoidApplicationBarIconButton_Click_1(object sender,EventArgs e){IsEditable=!IsEditable;foreach(var obj inDataList){ obj.IsEditable=IsEditable; obj.IsChecked=false;}this.GroupListBox.ItemsSource=null;this.GroupListBox.ItemsSource=DataList;}}}

GroupClass.cs

using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; namespace longlistselector {classGroupClass{publicstringImageSource{ get;set;}publicstringContent{ get {returnIsActive?"/Assets/Images/Active.png":"/Assets/Images/Inactive.png";}}publicstringName{ get;set;}publiclongUnitGroupID{ get;set;}public bool IsActive{ get;set;}public bool IsCustom{ get;set;}public bool IsChecked{ get;set;}public bool IsEditable{ get ;set;}publicVisibilityControlVisibility{ get {returnIsEditable?Visibility.Visible:Visibility.Collapsed;}}}}
xamlc# xaml windows phone 
Updated on 01-Apr-2015
Samuel Fernandes

Samuel Fernandes

Follow

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

01-Apr-2015

Finally after struggling for 2 day, i solve this issue and fix it.

Replace the groupclass.cs with this code:

groupclass.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
namespace longlistselector
{
    class GroupClass : INotifyPropertyChanged
    {

        public string ImageSource
        {
            get;
            set;
        }
        public string Content
        {
            get;
            set;
        }
        public string Name
        {
            get;
            set;
        }
        public long UnitGroupID
        {
            get;
            set;
        }
        private bool isActive;
        public bool IsActive
        {
            get { return isActive; }
            set
            {
                isActive = value;
                Content = isActive ? "/Assets/Images/Active.png" : "/Assets/Images/Inactive.png";
                OnPropertyChanged("IsActive");
                OnPropertyChanged("Content");
            }
        }
        public bool IsCustom
        {
            get;
            set;
        }
        public bool IsChecked
        {
            get;
            set;
        }
        private bool isEditable;
        public bool IsEditable
        {
            get { return isEditable; }
            set
            {
                if (value != isEditable)
                {
                    isEditable = value;
                    OnPropertyChanged("IsEditable");
                    ControlVisibility = isEditable ? Visibility.Visible : Visibility.Collapsed;
                    OnPropertyChanged("ControlVisibility");
                }
            }
        }
        public Visibility IsCustomControlVisibility
        {
            get { return IsEditable & IsCustom ? Visibility.Visible : Visibility.Collapsed; }
        }
        public Visibility ControlVisibility
        {
            get;
            set;
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

We just need to call the INotifyPropertyChanged at couple of more places in the code.


Liked By